<template>
	<view class="wrap">
		<view class="bg-color"></view>
		<image class="bg" src="../../static/image/vip_bg.png"  mode="widthFix" style="width: 100vw;"></image>
		<view class="box box-s">
			<view class="top ">
				<view class="t1">VIP专享权限</view>
				<view class="t2">免费查看最新数据和历史数据</view>
			</view>
			<view class="con">
				<view class="t3">参与方式</view>
				<view class="t4">分享该链接到微信好友、微信群或者朋友圈即可参与</view>
				<view class="btns f-r-b">
					<button class="btn btn1 f-r-c box-s " open-type="share">立即邀请</button>
					<view class="btn btn2 f-r-c bggradient box-s" @click="toVip" >付费开通</view>
				</view>
				<view class="foot">
					<view class="t5">邀请好友开通会员可得VIP会员奖励，邀请越多，奖励越多</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				userinfo:{},
				userShareImage:'',
				userShareText:'',
			}
		},
		onLoad() {
			let userinfo=uni.getStorageSync('userinfo');
			if(userinfo){
				 this.userinfo=userinfo;
			 }
			 this.userShareImage=uni.getStorageSync('configData').userShareImage;
			 this.userShareText=uni.getStorageSync('configData').userShareText;
		},
		onShareAppMessage() {
		    return {
		        title: this.userShareText,
		        path: '/pages/index/index?type=share&referralCode='+this.userinfo.referralCode,
				imageUrl:this.$prefix(this.userShareImage),
		    }
		},
		//分享到朋友圈
		onShareTimeline() {
		     return {
		       title: this.userShareText,
		       path: '/pages/index/index?type=share&referralCode='+this.userinfo.referralCode,
			   imageUrl:this.$prefix(this.userShareImage),
		     } 
		   
		},
		methods:{
			toVip(){
				uni.navigateTo({
					url:'/pages/main/buyVip',
				})
			},
			//分享
			share(){
				
			},
			
		}
	}
</script>

<style scoped lang="less">
	button{
	        border:0;
	        -webkit-tap-highlight-color: transparent;
	        background-color:transparent;
	//         // border-radius:50%;
	        box-sizing: border-box;
	//         color: #000;
	        cursor: pointer;
	//         display: block;
	       border-radius: 20rpx;
	       font-size: 33rpx;
	       font-weight: 500;
	       text-align: center;
	        line-height:0;
	        margin-left: 0;
	        margin-right: 0;
	        overflow: hidden;
	        padding-left: 0;
	        padding-right: 0;
	        position: relative;
	        text-decoration: none;
	}
	button::after{
	     border:0;
	}
	.wrap{
		.bg-color{
			width: 100vw;
			height: 100vh;
			background: #f00;
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			z-index: -1;
		}
		.box{
			width: 684rpx;
			// height: 700rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			background: #fff;
			overflow: hidden;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50% , -18%);
			.top{
				padding:32rpx ;
				background: rgba(255,0,0,0.2);
				border-bottom: 1rpx solid  rgba(255,0,0,0.4);
				overflow: hidden;
				.t1{
					font-size: 42rpx;
					font-weight: 700;
					text-align: center;
					color: #ca0000;
				}
				.t2{
					margin-top: 20rpx;
					font-size: 26rpx;
					font-weight: 400;
					text-align: center;
					color: #ca0000;
				}
				
			}
			.con{
				padding: 32rpx;
				.t3{
					color: #ca0000;
					font-size: 32rpx;
					font-weight: 700;
					text-align: center;
					margin-bottom: 10rpx;
					
				}
				.t4{
					color: #000;
					font-size: 26rpx;
					font-weight: 400;
					text-align: center;
				}
				.btns{
					height: 80rpx;
					margin: 70rpx 0;
					.btn{
						flex:1;
						height: 100%;
						border-radius: 60rpx;
						margin-right: 40rpx;
						text-align: center;
						color: #fff;
						font-weight: 400;
						font-size: 30rpx;
					}
					.btn1{
						background: #0099ff;
					}
					.btn2{
						margin-right: 0;
					}
				}
				.foot{
					.t5{
						text-align: center;
						font-size: 26rpx;
						color: #000;
						margin-bottom: 10rpx;
						
					}
					.t6{
						text-align: center;
						font-size: 26rpx;
						color: #000;
						margin-bottom: 20rpx;
						.key{
							color: #f00;
							margin: 0 10rpx;
						}
					}
				}
				
			}
		}
		
		
	}
	
</style>